<!DOCTYPE html>
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.7
Version: 4.7.5
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
    <meta charset="utf-8" />
    <title>Metronic Admin Theme #1 | Admin Dashboard</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports" name="description"/>
    <meta content="" name="author" />
    <!-- BEGIN GLOBAL MANDATORY STYLES -->

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->
    <link href="../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
    <!-- BEGIN THEME GLOBAL STYLES -->
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
    <!-- END THEME GLOBAL STYLES -->
    <!-- BEGIN THEME LAYOUT STYLES -->
   <!-- <link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />-->
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
<body>
    <div class="from_control">
        <div class="from_control_l">
            <div class="drop_select">
                <span class="label_on fl margin-right-10">125px:</span>
                <select class="bs-select form-control" data-width="125px">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>
            </div>
            <div class="toggle_on">
                <span class="label_on fl margin-right-10">显示空表:</span>
                <input type="checkbox" class="make-switch" checked data-on-color="success" data-off-color="warning">
            </div>
            <div class="data_search">
                <input type="text" class="fl"/>
                <button class="btn blue-hoki fl">搜索</button>
            </div>
        </div>
        <div class="from_control_r">
            <div class="form_btn">
            <button class="btn blue-hoki">按钮</button>
            </div>
            <div class="btn-group">
                <a href="" class="btn dark btn-outline btn-circle btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">按钮
                    <span class="fa fa-angle-down"> </span>
                </a>
                <ul class="dropdown-menu pull-right">
                    <li>
                        <a href="javascript:;"> 陈彪心好累好像退休

                        </a>
                    </li>
                    <li>
                        <a href="javascript:;"> 陈彪心好累好像退休

                        </a>
                    </li>
                    <li >
                        <a href="javascript:;"> 陈彪心好累好像退休

                        </a>
                    </li>

                </ul>
            </div>
            <div style="padding-top:5px">
                <input name="status" type="checkbox" data-size="mini">
            </div>
        </div>

    </div>

    <div class="mt-radio-list">
        <label class="mt-radio mt-radio-outline"> Radio 1
            <input type="radio" value="1" name="test" />
            <span></span>
        </label>
        <label class="mt-radio mt-radio-outline"> Radio 2
            <input type="radio" value="1" name="test" />
            <span></span>
        </label>
        <label class="mt-radio mt-radio-outline"> Radio 3
            <input type="radio" value="1" name="test" />
            <span></span>
        </label>
    </div>
</body>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script src="../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../assets/pages/scripts/components-bootstrap-switch.min.js" type="text/javascript"></script>
<script src="../assets/pages/scripts/components-bootstrap-select.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
<script>
    $('.bootstrap-switch').on('switch-change', function (e, data) {
        var $el = $(data.el)
                , value = data.value;
        console.log(e, $el, value);
    });

    $('[name="status"]').bootstrapSwitch({
        onText:"ON",
        offText:"OFF",
        onColor:"success",
        offColor:"default",
        size:"mini",
        state:true,
        onSwitchChange:function(event,state){
            if(state==true){
             //   alert('已打开');
            }else{
               // alert('已关闭');
            }
        }

    })
</script>
</html>